<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- 禁止缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <title>LayUI单页面应用</title>
    <link rel="stylesheet" href="https://registry.npmmirror.com/layui/2.11.6/files/dist/css/layui.css">
    <link rel="stylesheet" href="css/common.css?v=" + Date.now()>
    <!-- 引入动画样式 -->
    <link rel="stylesheet" href="css/animations.css?v=" + Date.now()>
    <style>
        /* SPA特定样式 */
        .app-container {
            height: 100vh;
            overflow: hidden;
        }
        
        .main-content {
            height: calc(100vh - 60px - 50px);
            overflow-y: auto;
            position: relative;
        }
        
        .view-container {
            min-height: 100%;
            padding: 20px;
            position: relative;
        }
        
        .page-transition {
            transition: all 0.3s ease;
        }
        
        .page-enter {
            opacity: 0;
            transform: translateX(20px);
        }
        
        .page-leave {
            opacity: 0;
            transform: translateX(-20px);
        }
        
        .loading-view {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }
        
        .route-link {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .route-link:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        
        .route-link.active {
            background-color: #009688;
            color: white;
        }
        
        .breadcrumb-nav {
            background: #f8f8f8;
            padding: 10px 20px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .breadcrumb-nav .layui-breadcrumb a {
            color: #666;
        }
        
        .breadcrumb-nav .layui-breadcrumb a:hover {
            color: #009688;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs">LayUI单页面应用</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                    <a href="#/" class="route-link" data-route="/">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="#/charts" class="route-link" data-route="/charts">图表</a>
                </li>
                <li class="layui-nav-item">
                    <a href="#/links" class="route-link" data-route="/links">链接信息</a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <!-- 用户中心功能已移除 -->
            </ul>
        </div>
        
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 侧边导航 -->
                <ul class="layui-nav layui-nav-tree" lay-filter="side-nav">
                    <li class="layui-nav-item">
                        <a href="#/" class="route-link" data-route="/">
                            <i class="layui-icon layui-icon-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-chart"></i>
                            图表示例
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="#/charts" class="route-link" data-route="/charts">图表测试</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-list"></i>
                            列表展示
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="#/links" class="route-link" data-route="/links">链接信息</a></dd>
                            <dd><a href="#/stats/day" class="route-link" data-route="/stats/day">按天统计</a></dd>
                            <dd><a href="#/stats/process" class="route-link" data-route="/stats/process">进程统计</a></dd>
                            <dd><a href="#/v2/resolve" class="route-link" data-route="/v2/resolve">V2解析</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 主体内容区域 -->
        <div class="layui-body main-content">
            <!-- 面包屑导航 -->
            <div class="breadcrumb-nav" id="breadcrumb">
                <span class="layui-breadcrumb">
                    <a href="#/">首页</a>
                    <a><cite id="current-page">首页</cite></a>
                </span>
            </div>
            
            <!-- 视图容器 -->
            <div class="view-container" id="app-view">
                <!-- 页面内容将在这里动态加载 -->
                <div class="loading-view">
                    <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px;"></i>
                    <p style="margin-top: 10px;">正在加载页面...</p>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <div class="layui-footer">
            © LayUI单页面应用示例
        </div>
    </div>

    <!-- 引入依赖库 -->
    <script src="https://registry.npmmirror.com/layui/2.11.6/files/dist/layui.js?v=" + Date.now()></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js?v=" + Date.now()></script>
    <script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js?v=" + Date.now()></script>
    
    <!-- 状态管理器 -->
    <script src="js/state-manager.js?v=" + Date.now()></script>
    <!-- 路由系统 -->
    <script src="js/router.js?v=" + Date.now()></script>
    <!-- 路由配置 -->
    <script src="js/routes.js?v=" + Date.now()></script>
    
    <!-- 页面视图组件 -->
    <script src="js/views/home.js?v=" + Date.now()></script>
    <script src="js/views/charts.js?v=" + Date.now()></script>
    <script src="js/views/links.js?v=" + Date.now()></script>
    <script src="js/views/stats-day.js?v=" + Date.now()></script>
    <script src="js/views/stats-process.js?v=" + Date.now()></script>
    <script src="js/views/v2-resolve.js?v=" + Date.now()></script>
    
    <!-- 主应用 -->
    <script>
        layui.use(['element', 'layer'], function() {
            var element = layui.element;
            var layer = layui.layer;
            
            // 初始化路由系统
            var router = new Router();
            
            // 定义路由
            router.addRoute('/', {
                title: '首页',
                component: 'home'
            });
            
            router.addRoute('/charts', {
                title: '图表测试',
                component: 'charts'
            });
            
            router.addRoute('/links', {
                title: '链接信息',
                component: 'links'
            });
            
            router.addRoute('/stats/day', {
                title: '按天统计',
                component: 'statsDay'
            });
            
            router.addRoute('/stats/process', {
                title: '进程统计',
                component: 'statsProcess'
            });
            
            router.addRoute('/v2/resolve', {
                title: 'V2解析',
                component: 'v2Resolve'
            });
            
            // 初始化应用
            router.init();
            
            // 监听路由链接点击事件
            $(document).on('click', '.route-link', function(e) {
                e.preventDefault();
                var route = $(this).data('route');
                if (route) {
                    router.navigate(route);
                }
            });
            
            // 监听浏览器前进后退
            window.addEventListener('popstate', function(e) {
                router.handleRoute();
            });
            
            // 初始化LayUI组件
            element.render();
            
            console.log('LayUI单页面应用初始化完成');
        });
    </script>
</body>
</html>